import "./register.css";
import React, { useState } from "react";
import logo from "../../assets/s2.png";
import { useNavigate } from "react-router-dom";
import { useDispatch } from "react-redux";
import SelfInput from "../components/SelfInput";
import YzmInput from "../components/yzminput";
import Pwb1Input from "../components/pwb1input";
import Pwb2Input from "../components/pwb2input";
import { logindata, regiser } from "store/login";
import { Form, Button, Input } from "antd-mobile";
import { EyeInvisibleOutline, EyeOutline } from "antd-mobile-icons";
import icon5 from "../../assets/lmicon/register_icon_invitatiion_code_n.png";

const Index = () => {
  const [visible, setVisible] = useState(false);
  const [seconds, setSeconds] = useState<number>(0);
  const navigate = useNavigate();
  const [form] = Form.useForm();
  const dispatch = useDispatch<any>();
  const back = () => {
    history.back();
  };

  const handleTickTime = () => {
    let num = 60;
    let timer: any = setInterval(() => {
      if (!num) {
        clearInterval(timer);
        timer = null;
        return;
      }
      setSeconds(num);
      num--;
    }, 1000);
  };

  const getyzm = () => {
    const email = form.getFieldValue("email");
    dispatch(logindata(email));
    handleTickTime();
  };

  const register = () => {
    const data = form.getFieldsValue();
    dispatch(regiser(data)).then((res: any) => {
      if (res) {
        if (res.payload.status === "0000") {
          navigate("/");
        }
      }
    });
  };

  return (
    <div className="register">
      <div className="top">
        <img src={logo} alt="" />
      </div>
      <div className="main">
        <Form layout="horizontal" mode="card" form={form}>
          <Form.Item
            name={"email"}
            extra={
              <div>
                {seconds ? (
                  <span>{seconds}</span>
                ) : (
                  <Button size="small" color="primary" onClick={getyzm}>
                    获取验证码
                  </Button>
                )}
              </div>
            }
          >
            {/* <img src={icon1} alt="" /> */}
            <SelfInput
              placeholder="请输入邮箱"
              type={visible ? "text" : "password"}
            />
          </Form.Item>
          <Form.Item name={"code"}>
            <YzmInput placeholder="请输入验证码" />
          </Form.Item>
          <Form.Item
            className="password"
            name={"pwd1"}
            extra={
              <div>
                {!visible ? (
                  <EyeInvisibleOutline onClick={() => setVisible(true)} />
                ) : (
                  <EyeOutline onClick={() => setVisible(false)} />
                )}
              </div>
            }
          >
            <Pwb1Input
              className="input"
              placeholder="请输入密码"
              type={visible ? "text" : "password"}
            />
          </Form.Item>
          <Form.Item
            className="password"
            name={"pwd2"}
            extra={
              <div>
                {!visible ? (
                  <EyeInvisibleOutline onClick={() => setVisible(true)} />
                ) : (
                  <EyeOutline onClick={() => setVisible(false)} />
                )}
              </div>
            }
          >
            <Pwb2Input
              className="input"
              placeholder="请再次输入密码"
              type={visible ? "text" : "password"}
            />
          </Form.Item>
          <Form.Item extra={<div>选填</div>}>
            <img src={icon5} alt="" />
            <Input placeholder="请输入邀请码" />
          </Form.Item>
          <div className="btn">
            <Button block color="primary" size="middle" onClick={register}>
              注册
            </Button>
          </div>
        </Form>
      </div>
    </div>
  );
};
export default Index;
